<template>
  <div class="userInfo-container">
    <van-nav-bar
      class="page-nav-bar"
      right-text="保存"
      left-arrow
      title="个人信息"
      @click-left="$router.back()"
      @click-right="clickRight"
    >
    </van-nav-bar>
    <van-cell title="头像" is-link>
      <van-image
        slot="default"
        round
        fit="cover"
        :src="userInfo.photo"
        @click="imgClick"
      ></van-image>
    </van-cell>
    <van-cell title="昵称" :value="userInfo.name" is-link @click="namePopShow = true"></van-cell>
    <van-cell
      title="性别"
      :value="userInfo.gender ? '女' : '男'"
      is-link
      @click="genderPopShow = true"
    ></van-cell>
    <van-cell title="生日" :value="userInfo.birthday" is-link @click="birPopShow = true"></van-cell>
    <!-- 头像上传隐藏域 -->
    <input ref="fileRef" type="file" hidden @change="onFileChange" />
    <!-- /头像上传隐藏域 -->
    <van-popup
      v-if="photoPopShow"
      v-model="photoPopShow"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <photo-edit v-if="photo" :img="photo" @croppedImage="uploadPhoto($event)"></photo-edit>
    </van-popup>
    <van-popup v-model="namePopShow" position="bottom">
      <name-edit @changeName="userInfo.name = $event" @close="namePopShow = false"></name-edit>
    </van-popup>
    <van-popup v-model="genderPopShow" position="bottom">
      <gender-edit
        @genderValue="userInfo.gender = $event"
        @close="genderPopShow = false"
      ></gender-edit>
    </van-popup>
    <van-popup v-model="birPopShow" position="bottom">
      <bir-edit @birthday="userInfo.birthday = $event" @close="birPopShow = false"></bir-edit>
    </van-popup>
  </div>
</template>

<script>
import { editUserInfo, getUserProfile, uploadPhoto } from '@/api/user.js'
import genderEdit from './genderEdit.vue'
import birEdit from './birEdit.vue'
import nameEdit from './nameEdit.vue'
import photoEdit from './photoEdit.vue'
export default {
  name: 'EditUser',
  components: {
    genderEdit,
    birEdit,
    nameEdit,
    photoEdit
  },
  props: {},
  data() {
    return {
      userInfo: {},
      photoPopShow: false,
      namePopShow: false,
      genderPopShow: false,
      birPopShow: false,
      photo: null
    }
  },
  created() {
    this.getUserInfo()
  },
  methods: {
    async clickRight() {
      console.log(this.userInfo);
      // 只能改一项
      const { data } = await editUserInfo({
        name: this.userInfo.name
      })
      console.log(data);
    },
    async getUserInfo() {
      const { data } = await getUserProfile()
      this.userInfo = data.data
    },
    imgClick() {
      // this.photoPopShow = true
      this.$refs.fileRef.click()
    },
    onFileChange() {
      console.log(this.$refs.fileRef.value)
      console.log(this.$refs.fileRef.files[0])
      const data = window.URL.createObjectURL(this.$refs.fileRef.files[0])
      this.photo = data
      this.photoPopShow = true
      this.$refs.fileRef.value = ''
    },
    async uploadPhoto(file) {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true, // 禁用背景点击
        loadingType: 'spinner',
        message: '保存中'
      })
      try {
        const { data } = await uploadPhoto(file)
        this.userInfo.photo = data.data.photo
        this.photoPopShow = false
        this.$toast.success('上传成功')
      } catch (error) {
        this.$toast.fail('上传失败')
      }
    }
  }
}
</script>

<style scope lang="less">
.userInfo-container {
  .van-cell {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 32px;
  }
  .van-cell .van-image {
    width: 80px;
    height: 80px;
    margin-right: 10px;
  }
}
</style>
